<template>
    <customNavigationBar title="我要提现" />

    <view class="page">
        <view class="inputBox">
            <view class="title">提现金额</view>

            <view class="input">
                ￥
                <input type="number" v-model.number="money" placeholder="请输入" />
            </view>

            <view class="bottom">
                <span>可提现余额：￥{{ walletInfo?.withdrawBalance }}</span>
                <span @click="allWithdraw">全部提现</span>
            </view>
        </view>

        <view class="tips">手续费说明：用户提现时，平台会扣除提现金额的6.5‰（千分之6.5）作为服务费，最低为0.01元（人民币）</view>

        <view class="types">
            <view class="withdrawalType" v-for="item in withdrawalType" :key="item.name" @click="chooseType = item.name">
                <view class="title">提现至</view>

                <view class="item">
                    <view class="option" v-if="userRole != 4">
                        <image :src="item.icon"></image>

                        <span v-if="item.name === '银行卡'">
                            {{ binddingInfo?.bankName ? `${binddingInfo?.bankName}(****${binddingInfo?.bankCardNumber?.slice(-4)})` : '银行卡' }}
                        </span>

                        <span v-else>{{ item.name }}</span>
                    </view>

                    <view class="option" v-else>
                        <image :src="item.icon"></image>

                        <span v-if="item.name === '银行卡'">
                            {{ CompanyInfo?.bankName ? `${CompanyInfo?.bankName}(****${CompanyInfo?.bankCardNo?.slice(-4)})` : '银行卡' }}
                        </span>

                        <span v-else>{{ item.name }}</span>
                    </view>

                    <view class="checkBox" :class="item.name === chooseType && 'checked'">
                        <image src="/static/common/icon_checked_white.png"></image>
                    </view>
                </view>
            </view>
        </view>
    </view>

    <view class="submit">
        <view @click="SubmitEvent">提现</view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { financeApis, userApis } from '@/utils/apis';
const CBTNum = ref(null);

onShow(() => {
    getData();
});
const userRole = ref(null); //0推广 1管家 2 运营中心
let binddingInfo = ref(null);
const walletInfo = ref(null);
const CompanyInfo = ref(null);
const getData = async () => {
    let res = await financeApis.getWalletInfo();
    walletInfo.value = res.data;
    userRole.value = JSON.parse(uni.getStorageSync('userInfomation')).identityType;
    if (userRole.value == 4) {
        let res = await userApis.getCompanyInfo();
        CompanyInfo.value = res.data;
    } else {
        let res2 = await userApis.getBankDetail();
        binddingInfo.value = res2.data;
    }
};

const allWithdraw = () => {
    money.value = walletInfo.value.withdrawBalance;
};

const money = ref(null);
const chooseType = ref('银行卡');
const withdrawalType = ref([
    // {
    //     icon: '/static/common/icon_wx.png',
    //     name: '微信'
    // },
    // {
    //     icon: '/static/common/icon_zfb.png',
    //     name: '支付宝'
    // },
    {
        icon: '/static/common/icon_bank.png',
        name: '银行卡'
    }
]);

const SubmitEvent = async () => {
    if (money.value > walletInfo.value.withdrawBalance) {
        uni.showModal({
            showCancel: false,
            content: '可提现余额不足，已为您更改为最大可提现余额'
        });
        money.value = walletInfo.value.withdrawBalance;
        return;
    }

    if (chooseType.value === '银行卡' && binddingInfo.value.xmtrBankStatus != 2) {
        uni.showModal({
            content: '未绑定银行卡，现在去绑定?',
            success(res) {
                if (res.confirm) {
                    uni.navigateTo({
                        url: '/pages_user/banddingBank/banddingBank'
                    });
                }
            }
        });

        return;
    }

    financeApis
        .withdrawalSubmit({
            amount: money.value,
            channel: chooseType.value,
            nickname: JSON.parse(uni.getStorageSync('userInfomation')).nickName,
            type: 1
        })
        .then(() => {
            uni.showModal({
                showCancel: false,
                content: '提现申请成功，请审核通过后进行提现'
            });
            money.value = null;
            getData();
        });
};
</script>
<style lang="scss">
page {
    background-color: #f2f3f5;
}
</style>
<style lang="scss" scoped>
.page {
    padding: 24rpx;
    padding-bottom: 140rpx;
}

.inputBox {
    width: 100%;
    padding: 30rpx 24rpx 20rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    .title {
        font-size: 32rpx;
        color: #333333;
    }
    .input {
        padding: 20rpx 0;
        display: flex;
        align-items: center;
        gap: 14rpx;
        border-bottom: 2rpx solid #e4e4e6;
        font-size: 48rpx;
        color: #333333;

        input {
            flex: 1;
            font-size: 48rpx;
            color: #333333;
        }
        input::placeholder {
            color: #b3b3b3;
        }
    }
    .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 24rpx;

        span {
            font-size: 28rpx;
            color: #b3b3b3;
        }
        span:last-child {
            color: #333333;
        }
    }
}

.types {
    .withdrawalType {
        margin-top: 24rpx;
        width: 100%;
        background: #ffffff;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 24rpx 24rpx 40rpx;
        .title {
            font-weight: bold;
            font-size: 32rpx;
            color: #333333;
            margin-bottom: 24rpx;
        }

        .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .option {
                display: flex;
                align-items: center;
                image {
                    width: 64rpx;
                    height: 64rpx;
                }
                span {
                    margin-left: 24rpx;
                    font-size: 28rpx;
                    color: #333333;
                }
            }

            .checkBox {
                width: 40rpx;
                height: 40rpx;
                border: 2rpx solid #707070;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                transition: 0.3s;
                image {
                    width: 21rpx;
                    height: 15rpx;
                    opacity: 0;
                }
                &.checked {
                    width: 40rpx;
                    height: 40rpx;
                    background: #2c72ff;
                    border: 2rpx solid #2c72ff;
                    image {
                        opacity: 1;
                    }
                }
            }
        }
    }
}
.tips {
    margin-top: 12rpx;
    font-size: 24rpx;
    color: #333333;
}

.submit {
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    left: 0;
    width: 100%;
    padding: 30rpx 24rpx;
    background-color: #fff;
    view {
        width: 100%;
        height: 80rpx;
        background: #2c72ff;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
        line-height: 80rpx;
        text-align: center;
    }
}
</style>
